<template id="collage_class">
	<div class="collage_class">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/collage"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>课程预约</p>
				<div class="about_select">
					<div class="about_ing"></div>
				</div>

			</div>
		</div>
		<!--头部结束-->

		<!--轮播图-->
		<div class="swiper-container-banner">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img v-lazy="coach.img1"/></div>
				<div class="swiper-slide"><img v-lazy="coach.img2"/></div>
				<div class="swiper-slide"><img v-lazy="coach.img3"/></div>

			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
		<!--轮播图结束-->

		<!--瑜伽馆的基本信息-->

		<div class="collage_info">
			<!--版心-->
			<div class="collage_wrap">

				<div class="collage_store">
					<div class="store_left">
						<h1>{{coach.gym_name}}</h1>
						<p>供瑜伽爱好及习练者使用</p>
					</div>
					<div class="store_right">
						<h1>{{coach.distance}}分</h1>
						<p><span>274评价</span><img src="../../assets/images/collage/collage_class_03.png" alt="" /></p>
					</div>
				</div>
				<div class="collage_tel">
					<a href="tel:176 0103 6600">
						<img src="../../assets/images/collage/collage_class_07.png" />
						<span>176-0103-6600</span>
					</a>

				</div>
				<div class="collage_map">
					<div class="map_left">
						<img src="../../assets/images/collage/collage_class_11.png" />
						<span>{{coach.gym_address}}</span>
					</div>
					<div class="map_right" @click.stop="mapPosition(coach.lat,coach.lng)">
						<span>地图</span>
						<img src="../../assets/images/main/my_27.png" />
					</div>
				</div>

			</div>
			<!--版心结束-->
		</div>

		<!--瑜伽馆的基本信息结束-->

		<div class="collage_data">

			<!--日期-->
			<div class="data_date">

				<!--<div class="slider">
					<ul style="float: left;" ref="left" id="timeRow">
						<li class="bgHome" v-if="index==1" style="background:#2d8f90;color: #ffffff"  @click.stop="Laney(times.time, index,$event)" v-for="(times,index) in timeArr" :key="index">
							<p id="timeP" style="color: #ffffff" :class="times.bgColor ? 'active' : ''">{{times.time | formatDate}}</p>
							<span :class="times.bgColor ? 'active' : ''">{{times.week}}</span>
						</li>
            <li class="bgHome"  v-if="index!=1&&index<7" @click.stop="Laney(times.time, index,$event)" v-for="(times,index) in timeArr" :key="index">
              <p :class="times.bgColor ? 'active' : ''">{{times.time | formatDate}}</p>
              <span :class="times.bgColor ? 'active' : ''">{{times.week}}</span>
            </li>
					</ul>

				</div>-->
				<div class="swiper-container-stop">
					<div class="swiper-wrapper" id="timeRow">
						<div class="swiper-slide bgHome" v-if="index==0" style="background:#2d8f90;color: #ffffff" @click.stop="Laney(times.time, index,$event)" v-for="(times,index) in timeArr" :key="index">
							<p id="timeP" style="color: #ffffff" :class="times.bgColor ? 'active' : ''">{{times.time | formatDate}}</p>
							<span :class="times.bgColor ? 'active' : ''">{{times.week}}</span>
						</div>
						<div class="swiper-slide bgHome" v-if="index!=0&&index<7" @click.stop="Laney(times.time, index,$event)" v-for="(times,index) in timeArr" :key="index">
							<p :class="times.bgColor ? 'active' : ''">{{times.time | formatDate}}</p>
							<span :class="times.bgColor ? 'active' : ''">{{times.week}}</span>
						</div>

					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination"></div>
				</div>

			</div>
			<!--日期结束-->

			<div class="collage_make">
				<ul>
					<li v-for="(item,index) in most" :key="index">
						<div class="collage_li">
							<dl>
								<dt>
           	<h1>{{item.action_time | formatDate}}</h1>
           <p>( {{item.durable}}分钟 )</p></dt>
								<dd>
									<p>{{item.action_name}}</p>
									<div class="collage_go"><span>{{item.gym_name}}</span></div>
									<p>还可预约{{item.max_people -item.success_people}}人</p>
									<div class="xing">

										<span>难易程度</span>
										<div class="collage_xing">
											<el-rate v-model="item.level" disabled></el-rate>
										</div>
									</div>
								</dd>
							</dl>

							<button @click.stop="appointCoach(item.gym_id,item.id)">预约</button>
						</div>
					</li>

				</ul>
			</div>

		</div>

		<div class="collage_foot">
			<div class="collage_top">
				<span></span>
				<p>温馨提示</p><span></span>
			</div>
			<div class="collage_bottom">
				<p>为了保证您和他人的上课质量,请提前至少2小时预约或取消课程.(注:课程满员16人,除球瑜伽满员10人,开课前半小时截止预约或取消预约)</p>
			</div>
		</div>
		<!-- <v-footer></v-footer> -->

	</div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
	export default {
		name: 'App',
		components: {
			// "v-footer":footer
		},
		data() {
			return {
				// newTime1: '',
				value1: 2,
				lng: '',
				lat: '',
				dataMoney: '',
				most: [],
				info: [],
				coach: [],
				selectTime: '',
				timeArr: [],
				date: '',
				index: '1',
				sessionid: '',
				gymid: this.$route.query.gym_id,
				appId: '',
				signature: '',
				timestamp: '',
				nonceStr: ''
			}
		},
		created() {
			let _this = this
			let url = window.document.location.href;
			let id = _this.gymid
			let qs = require('qs');
			let obj = {
				//请求的参数
				url: url
			};
			_this.$axios.post("/yujiaextend/coach/wxcoachshare", qs.stringify(obj), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}

			}).then(function(data) {
				console.log(data);
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: data.data.appid, // 必填，公众号的唯一标识
					timestamp: data.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
					signature: data.data.signature, // 必填，签名
					jsApiList: [
						"updateAppMessageShareData",
						"updateTimelineShareData",
						"onMenuShareWeibo",
						"onMenuShareTimeline",
						"onMenuShareAppMessage",
						"onMenuShareQQ",
						"onMenuShareQZone"
					] // 必填，需要使用的JS接口列表
				});
				wx.ready(function() {
					//2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
					wx.onMenuShareAppMessage({
						title: '十一小长假，你刷朋友圈了吗？', // 分享标题
						desc: '蜗牛瑜家十一特惠，买一送一！', // 分享描述
						link: 'http://yogahome.top/ygweb/collage_class?id', // 分享链接
						imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
						type: 'link', // 分享类型,music、video或link，不填默认为link
						dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						success: function() {
							mui.alert('分享成功'); // 用户确认分享后执行的回调函数
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数

						},
						fail: function(res) {
							mui.alert(JSON.stringify(res));
						}
					});
				})
				wx.ready(function() {
					wx.onMenuShareTimeline({
						title: '十一小长假，你刷朋友圈了吗？', // 分享标题
						link: 'http://yogahome.top/ygweb/collage_class?id', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
						success: function() {
							mui.alert('分享成功')
						},
					});
				})
				wx.ready(function() {
					wx.onMenuShareQQ({
						title: '十一小长假，你刷朋友圈了吗？', // 分享标题
						desc: '蜗牛瑜家十一特惠，买一送一！', // 分享描述
						link: 'http://yogahome.top/ygweb/collage_class?id', // 分享链接
						imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
						success: function() {
							// 用户确认分享后执行的回调函数
							mui.alert('分享成功')
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
						}
					});
				})
				wx.ready(function() {
					wx.onMenuShareQZone({
						title: '十一小长假，你刷朋友圈了吗？', // 分享标题
						desc: '蜗牛瑜家十一特惠，买一送一！', // 分享描述
						link: 'http://yogahome.top/ygweb/collage_class?id', // 分享链接
						imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
						success: function() {
							// 用户确认分享后执行的回调函数
							mui.alert('分享成功')
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
						}
					});
				})

			}).catch(function(error) {
				console.log(error);
			});

		},
		
		mounted() {

			setTimeout(() => {
				var swiper = new Swiper('.swiper-container-banner', {
					autoplay: true,
					speed: 2000,
					pagination: {

						paginationClickable: true,
						el: '.swiper-pagination',
						loop: true,
						clickable: true,
					},
				});
			}, 10)
			setTimeout(() => {
				var swiper = new Swiper('.swiper-container-stop', {
					pagination: '.swiper-pagination',
					slidesPerView: 3,
					paginationClickable: true,
					spaceBetween: 30
				});

			}, 10)
		},
		filters: {
			formatDate(value) {
				let date = new Date(value);
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return MM + '-' + d;
			},

		},

		beforeMount() {
			let _this = this
			let qs = require('qs');
			let obj = {
				//请求的参数
				gymid: this.$route.query.gym_id

			};
			//  console.log(obj)
			_this.$axios.post("/yujiaextend/user/findGymActionByGymId", qs.stringify(obj), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}

			}).then(function(response) {
				_this.info = response.data.data
				// console.log(response.data.data[0])
				_this.coach = response.data.data[0]
				_this.most = response.data.data[1]
				_this.selectTime = response.data.data[2]
				// console.log(_this.selectTime)
				// console.log(_this.most)
				var d = new Date();
				var month = d.getMonth() + 1;
				var day = d.getDate();
				var year = d.getFullYear();
				if(month < 10) {
					month = '0' + month
				}
				if(day < 10) {
					day = '0' + day
				}

				var newTime = year + '-' + month + '-' + day
				//  console.log(newTime)
				setTimeout(() => {
					for(let i = 0; i < _this.timeArr.length; i++) {
						// console.log(_this.timeArr[i].time)
						if(_this.timeArr[i].time === newTime) {
							// console.log(_this.timeArr[i].time)
							_this.timeArr[i].bgColor = true;
						} else {
							_this.timeArr[i].bgColor = false;
						}
					}

				})
				window.weekArr = [];
				window.timeArr = [];
				//取日期
				for(var n in _this.selectTime) {
					if(n.indexOf('date') > -1) {
						timeArr.push({
							'time': _this.selectTime[n]
						})
					} else {
						continue;
					}
				};
				//取星期
				for(var n in _this.selectTime) {
					if(n.indexOf('week') > -1) {
						weekArr.push({
							'week': _this.selectTime[n]
						})
					} else {
						continue;
					}
				};
				var newObj = [];
				for(var i = 0; i < timeArr.length; i++) {
					newObj.push(Object.assign(timeArr[i], weekArr[i]))

				};
				_this.timeArr = newObj;
				// console.log(_this.timeArr)
				_this.timeArr.forEach(item => {
					_this.$set(item, 'bgColor', false);
				})
				_this.dataMoney = _this.timeArr[0].time;

			}).catch(function(error) {
				console.log(error);
			});

		},

		methods: {
			haha(item) {
				this.courseName = item.gym_name
				this.courseActive = false
			},

			Laney(times, index, event) {
				var tr = $('#timeRow').children();
				for(var i = 0; i < tr.length; i++) {

					if(tr[i] == event.target) {
						$(tr[i]).css("background", "green")

					} else {
						$(tr[i]).css("background", "white")
						$(tr[i]).css("color", "#ccc")
						$('#timeP').css("color", "#ccc")

					}
				}
				for(let i = 0; i < this.timeArr.length; i++) {
					if(index === i) {
						this.timeArr[i].bgColor = true;
					} else {
						this.timeArr[i].bgColor = false;
					}
					// console.log(this.timeArr[i])
				}

				let _this = this
				let qs = require('qs');
				let obj = {
					//请求的参数
					// datetime: times,
					datetime: '2018-10-19',
					gymid: this.$route.query.gym_id

				};

				_this.$axios.post("/yujiaextend/user/findGymActionByGymIdAndDateTime", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.dataMoney = _this.timeArr[0].time;
					_this.date = times
					// console.log(response.data.data)
					_this.most = response.data.data
					// console.log(_this.most)
					// console.log(_this.timeArr.slice(0,7))
					_this.selectTime = _this.timeArr.slice(0, 7)
					// console.log(_this.selectTime)
					// console.log(_this.selectTime)

				}).catch(function(error) {
					console.log(error);
				});

			},

			collageAdd() {
				var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID == null) {
				
					mui.alert('请登录')
					var collage
					this.$router.push({

						path: "/forgot_password",
						query: {
							collage: 'collage'
						}
					})
				} else {
					this.$router.push({
						path: '/collage'
					})
				}
			},
			appointCoach(gym_id,id) {
				var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
				let _this = this
				let qs = require('qs');
				let obj = {
					//请求的参数
					gym_id,
					id,

				};
				_this.$axios.post("/yujiaextend/user/findGymActionById", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					if(SESSION_ID == null) {
						mui.alert("请登录")
						_this.$router.push({
							path: "/forgot_password",
							query: {}
						})
						return;
					}
					_this.$router.push({
						path: "/collage_coach",
						query: {
							gym_id,
							id,
						}
					})
				}).catch(function(error) {
					console.log(error);
				});

			},
			mapPosition(lng, lat) {
				this.$router.push({
					path: '/collage_map',
					query: {
						'lng': 116.335151,
						'lat': 39.899481
					}
				})
			},

		}
	}
</script>

<style scoped>
	@import "../../assets/css/collage_class.css";
	@import "../../assets/css/footer_router.css";
	.data_date .swiper-container-stop {
		width: 90%;
		height: 50px;
		margin: 0 auto;
		overflow-y: scroll;
	}
	
	.swiper-container-stop .swiper-wrapper {
		width: 600px;
		margin: 0 auto;
	}
	
	.clear {
		clear: both
	}
	
	.data_date .swiper-container-stop .swiper-wrapper .swiper-slide {
		width: 60px!important;
		height: 50px;
		margin-right: 15px!important;
		text-align: center;
		float: left;
		font-size: 14px;
		overflow: hidden;
		border: 1px solid #ccc;
		border-radius: 6px;
		/* Center slide text vertically */
	}
	
	.data_date .swiper-container-stop .swiper-wrapper .swiper-slide p {
		width: 100%;
		height: 25px;
		font-size: 12px;
		line-height: 25px;
		color: #ccc;
	}
	
	.data_date .swiper-container-stop .swiper-wrapper .swiper-slide span {
		width: 100%;
		height: 25px;
		font-size: 12px;
		line-height: 25px;
		display: block;
	}
	
	.router-link-active {
		color: #2D8F90;
	}
	
	.bgHome {
		background: white;
		color: #2d8f90;
		border-radius: 6px;
		border: 0;
	}
	
	.active {
		color: #fff !important;
		background: #2d8f90 !important;
	}
	
	.active:first-child {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border: none!important;
	}
	
	.active:nth-child(2) {
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border: none!important;
	}
	
	.swiper-container-banner {
		width: 100%;
		height: 175px;
		/* background: #00FFFF; */
		position: relative;
		overflow: hidden;
	}
	
	.swiper-container-banner .swiper-wrapper .swiper-slide {
		width: 100%;
		text-align: center;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.swiper-container-banner .swiper-wrapper .swiper-slide img{
	width: 100%;
	height: 100%;
	}
	
	.swiper-container-banner .swiper-pagination-bullets .swiper-pagination-bullet {
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		opacity: 1;
		background: rgba(0, 0, 0, 0.2);
	}
	
	.swiper-container-banner .swiper-pagination-bullet-active {
		color: #fff;
		background: #007aff;
	}
</style>
<style>
	.collage_xing .el-rate__item {
		width: 14px;
		margin-top: 2px;
		margin-left: 3px;
	}
	
	.collage_xing .el-rate__icon {
		font-size: 14px;
	}
	
	.el-rate__icon .el-icon-star-on:before {
		width: 14px;
		height: 14px;
	}
</style>